<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="e5c0462224ca4b0387c5b44ccf8dd051" style="width:100%; height:600px;"></div>
    <script>
        var chart_e5c0462224ca4b0387c5b44ccf8dd051 = echarts.init(
            document.getElementById('e5c0462224ca4b0387c5b44ccf8dd051'), 'white', {renderer: 'canvas'});
        var option_e5c0462224ca4b0387c5b44ccf8dd051 = {
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "graph",
            "layout": "force",
            "circular": {
                "rotateLabel": false
            },
            "force": {
                "repulsion": 50,
                "edgeLength": 50,
                "gravity": 0.2
            },
            "label": {
                "show": false,
                "position": "top",
                "margin": 8,
                "fontSize": 12
            },
            "lineStyle": {
                "width": 1,
                "opacity": 1,
                "curveness": 0.2,
                "type": "solid"
            },
            "roam": true,
            "focusNodeAdjacency": true,
            "data": [
                {
                    "draggable": "False",
                    "name": "HtOQ2dvRo",
                    "category": "HtOQ2dvRo",
                    "value": 109.88409872672513,
                    "symbolSize": 15.438989379038887,
                    "username": "\u65e9\u62a5\u7f51",
                    "content": "\u3010\u9999\u6e2f\u67e5\u51fa\u975e\u6d32\u732a\u761f\u75c5\u6bd2 \u5c06\u9500\u6bc16000\u732a\u53ea\u3011\u9999\u6e2f\u98df\u7269\u53ca\u536b\u751f\u5c40\u957f\u9648\u8087\u59cb\u8bf4\uff0c\u88ab\u9a8c\u51fa\u6709\u975e\u6d32\u732a\u761f\u7684\u751f\u732a\u662f\u4ece\u5e7f\u4e1c\u6e5b\u6c5f\u8f93\u5165\u9999\u6e2f\uff0c\u98df\u7269\u5b89\u5168\u4e2d\u5fc3\u4ecd\u987b\u8fdb\u4e00\u6b65\u8c03\u67e5\u8fd9\u5934\u6b7b\u4ea1\u7684\u751f\u732a\u662f\u5728\u9999\u6e2f\u672c\u5730\u88ab\u611f\u67d3\uff0c\u8fd8\u662f\u5728\u8f93\u6e2f\u524d\u5c31\u5df2\u7ecf\u643a\u5e26\u75c5\u6bd2\u3002\u9999\u6e2f\u67e5\u51fa\u975e\u6d32\u732a\u761f\u75c5\u6bd2 \u5c06\u9500\u6bc16000\u732a\u53ea",
                    "posted_at": "2019-05-12 10:20:00",
                    "comment_count": 97,
                    "forward_count": 75,
                    "like_count": 91
                },
                {
                    "draggable": "False",
                    "name": "5d09a16d6847b0e6971e823f",
                    "category": "HtOQ2dvRo",
                    "value": 2.1,
                    "symbolSize": 5.1995000000000005
                },
                {
                    "draggable": "False",
                    "name": "5d09a16d6847b0e6971e8249",
                    "category": "HtOQ2dvRo",
                    "value": 3.0,
                    "symbolSize": 5.285
                },
                {
                    "draggable": "False",
                    "name": "5d09a1a46847b0e6971e8780",
                    "category": "HtOQ2dvRo",
                    "value": 0.0,
                    "symbolSize": 5.0
                },
                {
                    "draggable": "False",
                    "name": "5d09a1a46847b0e6971e8783",
                    "category": "HtOQ2dvRo",
                    "value": 0.6,
                    "symbolSize": 5.057
                },
                {
                    "draggable": "False",
                    "name": "5d09a1a46847b0e6971e879d",
                    "category": "HtOQ2dvRo",
                    "value": 0.0,
                    "symbolSize": 5.0
                },
                {
                    "draggable": "False",
                    "name": "5d09a1a46847b0e6971e87a3",
                    "category": "HtOQ2dvRo",
                    "value": 0.3,
                    "symbolSize": 5.0285
                },
                {
                    "draggable": "False",
                    "name": "5d09a1e16847b0e6971e8d29",
                    "category": "HtOQ2dvRo",
                    "value": 2.1,
                    "symbolSize": 5.1995000000000005
                }
            ],
            "categories": [
                {
                    "name": "HtOQ2dvRo"
                }
            ],
            "edgeSymbol": [
                null,
                null
            ],
            "edgeSymbolSize": 10,
            "links": [
                {
                    "source": "HtOQ2dvRo",
                    "target": "5d09a16d6847b0e6971e823f",
                    "username": "\u4f0d\u8272\u6f6e",
                    "content": "\u732a\u761f\uff0c\u9e21\u761f\uff0c\u725b\u761f\u6cdb\u6ee5\uff0c\u5269\u4e0b\u53ea\u6709\u7f8a\u4e86\uff01",
                    "posted_at": "2019-5-12 10:27:00",
                    "like_count": 7
                },
                {
                    "source": "HtOQ2dvRo",
                    "target": "5d09a16d6847b0e6971e8249",
                    "username": "\u4e91\u4e2d\u7684\u5f97angel_",
                    "content": "\u4e2d\u56fd\u6ca1\u6709\u975e\u761f\u4e4b\u524d\uff0c\u4e2d\u56fd\u81ea\u4ea7\u7684\u5df2\u7ecf\u4ef7\u683c\u4f4e\u5ec9\uff0c\u800c\u4e14\u5b8c\u5168\u5145\u8db3\uff0c\u517b\u732a\u6237\u4e5f\u662f\u7ef4\u6301\u6210\u672c\u800c\u5df2\uff0c\u6ca1\u5fc5\u8981\u8fdb\u53e3\u3002\u8fd8\u8fdb\u53e3\u75ab\u60c5\u56fd\u5bb6\u7684\u732a\u8089\u3002\u8fd9\u4e0b\u597d\u4e86\u4e2d\u56fd\u6240\u6709\u7684\u517b\u732a\u6237\u57fa\u672c\u88ab\u5751\uff0c\u51b3\u5b9a\u8fdb\u53e3\u75ab\u60c5\u56fd\u5bb6\u7684\u732a\u8d23\u4efb\u4eba\u5e94\u8be5\u6b7b\u5211\u4e0d\u4e3a\u8fc7\u3002\u8fd9\u662f\u9020\u6210\u591a\u5c11\u516c\u53f8\uff0c\u591a\u5c11\u5bb6\u5ead\u7684\u7834\u4ea7\u3002",
                    "posted_at": "2019-5-12 16:34:00",
                    "like_count": 10
                },
                {
                    "source": "HtOQ2dvRo",
                    "target": "5d09a1a46847b0e6971e8780",
                    "username": "\u4e50\u89c1\u82b1\u5f00",
                    "content": "\u8f6c\u53d1\u5fae\u535a",
                    "posted_at": "2019-5-12 15:39:00",
                    "like_count": 0
                },
                {
                    "source": "HtOQ2dvRo",
                    "target": "5d09a1a46847b0e6971e8783",
                    "username": "\u674e\u541b\u7684\u4e16\u754c",
                    "content": "\u4e1c\u4e9a\u5168\u8dd1\u4e0d\u4e86",
                    "posted_at": "2019-5-12 10:35:00",
                    "like_count": 2
                },
                {
                    "source": "HtOQ2dvRo",
                    "target": "5d09a1a46847b0e6971e879d",
                    "username": "\u5df4\u8700",
                    "content": "\u4fae\u8fb1\u516b\u6212",
                    "posted_at": "2019-5-12 10:42:00",
                    "like_count": 0
                },
                {
                    "source": "HtOQ2dvRo",
                    "target": "5d09a1a46847b0e6971e87a3",
                    "username": "\u59cb\u4e8e\u4eca\u590fQY",
                    "content": "\u6211\u4eec\u5bb6\u90a3\u8fb9\u597d\u591a\u732a\u573a\u7684\u732a\u90fd\u6b7b\u4e86\uff0c\u8857\u4e0a\u90fd\u6ca1\u5356\u732a\u8089\u7684\u4e86",
                    "posted_at": "2019-5-12 22:00:00",
                    "like_count": 1
                },
                {
                    "source": "HtOQ2dvRo",
                    "target": "5d09a1e16847b0e6971e8d29",
                    "username": "\u7537\u62a4\u58eb\u8054\u76df",
                    "content": "\u975e\u8981\u5230\u53f0\u6e7e\u9999\u6e2f\u624d\u80fd\u67e5\u51fa\u98df\u7269\u4e2d\u7684\u732a\u761f\u75c5\u6bd2\uff0c\u5728\u5927\u9646\u600e\u4e48\u5c31\u4e0d\u80fd\u67e5\u51fa\u6765\uff1f\uff1f",
                    "posted_at": "2019-5-12 11:26:00",
                    "like_count": 7
                }
            ]
        }
    ],
    "legend": [
        {
            "data": [
                "HtOQ2dvRo"
            ],
            "selected": {
                "HtOQ2dvRo": true
            },
            "show": false
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "title": [
        {
            "text": "\u5fae\u535a\u8f6c\u53d1\u5173\u7cfb\u56fe"
        }
    ]
};
        chart_e5c0462224ca4b0387c5b44ccf8dd051.setOption(option_e5c0462224ca4b0387c5b44ccf8dd051);
    </script>

            <script>
            temp = document.createElement('div');
            temp.id = 'username';
            temp.style.cssText = 'divposition:absolute; width:100%; height:100px; top: 620px; left:10px;';
            temp.style.font = '15px Times New Roman'
            document.body.appendChild(temp);
            chart_e5c0462224ca4b0387c5b44ccf8dd051.on('mouseover', function(params) {
                username = params.data.username;
                content = params.data.content;
                if(username && content) {
                    temp.innerHTML = '<h2>' + username + ':</h2>';
                    temp.innerHTML += '<h1>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp' + content + '</h1>';
                    temp.innerHTML += '<h3>'
                    if(comment_count = params.data.comment_count)
                        temp.innerHTML += '评论数：' + comment_count + '&nbsp&nbsp'
                    if(forward_count = params.data.forward_count)
                        temp.innerHTML += '转发数：' + forward_count + '&nbsp&nbsp  '
                    temp.innerHTML += '点赞数：' + params.data.like_count + '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp';
                    temp.innerHTML += params.data.posted_at + '</h3>';
                }
            });
            chart_e5c0462224ca4b0387c5b44ccf8dd051.on('mouseout', function(params) {
                temp.innerHTML = '';
            });
        </script>
        </body>
</html>
